<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Anchor from "./Anchor.svelte";
    import { HView, View } from "../View";
    import { Card } from "../Card";
    import AnchorLink from "./AnchorLink.svelte";

    const { Story } = defineMeta({
        title: "Components/Navigation/Anchor",
        component: Anchor,
        tags: ["autodocs"],
        argTypes: {
            bounds: {
                table: {
                    defaultValue: { summary: "5" },
                },
            },
            mode: {
                table: {
                    defaultValue: { summary: "hash" },
                },
            },
            showInk: {
                table: {
                    defaultValue: { summary: "false" },
                },
            },
        },
        args: {},
    });
</script>

<Story name="Default">
    {#snippet template(args)}
        <HView>
            <View class="anchor-scroll-container" style="height: 200px; overflow: auto; border: 1px solid #ccc">
                <div id="basic_usage">
                    <Card title="基础用法">
                        <div style="height: 600px"></div>
                    </Card>
                </div>

                <div id="static_position">
                    <Card title={"静态位置"}>
                        <div style="height: 600px"></div>
                    </Card>
                </div>

                <div id="API">
                    <Card title={"API"}>
                        <div style="height: 600px"></div>
                    </Card>
                </div>

                <div id="Anchor_props">
                    <Card title={"Anchor props"}>
                        <div style="height: 600px"></div>
                    </Card>
                </div>

                <div id="Anchor_events">
                    <Card title={"Anchor_events"}>
                        <div style="height: 600px"></div>
                    </Card>
                </div>

                <div id="AnchorLink_props">
                    <Card title={"AnchorLink_props"}>
                        <div style="height: 600px"></div>
                    </Card>
                </div>
            </View>
            <div style="width: 200px; padding-left: 32px">
                <Anchor mode="history" container={".anchor-scroll-container"}>
                    <AnchorLink href="#basic_usage" title="Basic Usage" />
                    <AnchorLink href="#static_position" title="Static Position" />
                    <AnchorLink href="#API" title="API">
                        <AnchorLink href="#Anchor_props" title="Anchor props" />
                        <AnchorLink href="#Anchor_events" title="Anchor events"></AnchorLink>
                        <AnchorLink href="#AnchorLink_props" title="AnchorLink props" />
                    </AnchorLink>
                </Anchor>
            </div>
        </HView>
    {/snippet}
</Story>

<Story name="Size">
    {#snippet template(args)}
        <div style="width: 200px; padding-left: 32px">
            <Anchor mode="history" container={".anchor-scroll-container"} size="small">
                <AnchorLink href="#basic_usage2" title="Basic Usage" />
                <AnchorLink href="#static_position2" title="Static Position" />
                <AnchorLink href="#API2" title="API">
                    <AnchorLink href="#Anchor_props2" title="Anchor props" />
                    <AnchorLink href="#Anchor_events2" title="Anchor events"></AnchorLink>
                    <AnchorLink href="#AnchorLink_props2" title="AnchorLink props" />
                </AnchorLink>
            </Anchor>
        </div>
    {/snippet}
</Story>
